<template>
	<view >
		<view class="padding-20">
			<SearchBox bgColor="#F5F7FB"  class="m-t-30"/>
		</view>
		<view class="nav-scroll flex">
			<block v-for="(item, index) in navList" :key="index">
				<NavItem class="m-l-30" :dataItem="item" />
			</block>
		</view>
		<view class="m-t-30 filter-box">
			<FilterBox />
		</view>
		<view class="shop-list">
			<block v-for="(item, index) in shopList" :key="index">
				<ShopItem :dataItem="item" type="shopMeal" />
			</block>
		</view>
	</view>
</template>

<script setup lang="ts">
	import SearchBox from '@/components/house/tabbar/index/searchBox/search-box.vue';
	import NavItem from '../components/navItem/index.vue';
	import FilterBox from '../components/filterBox/index.vue';
	import ShopItem from '../components/shopItem/index.vue';
	
	import { navList } from '@/config/config'
	
	import { ref } from 'vue';
	
	const shopList = ref(
		[
			{ 
				pic: 'https://img0.baidu.com/it/u=2022043590,1237511079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500', 
				name: '名称', 
				status: '1', 
				score: '5.0', 
				saleNum: 666, 
				distance: 500,
				intro: '新东方新东方到付发的到付到付史蒂夫史蒂夫史蒂夫收到'
			},
			{
				pic: 'https://img0.baidu.com/it/u=2022043590,1237511079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500', 
				name: '名称', 
				status: '1', 
				score: '5.0', 
				saleNum: 666, 
				distance: 500,
				intro: '新东方新东方到付发的到付到付史蒂夫史蒂夫史蒂夫收到'
			},
			{
				pic: 'https://img0.baidu.com/it/u=2022043590,1237511079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500', 
				name: '名称', 
				status: '1', 
				score: '5.0', 
				saleNum: 666, 
				distance: 500,
				intro: '新东方新东方到付发的到付到付史蒂夫史蒂夫史蒂夫收到'
			}
		]
	)
	
</script>

<style lang="scss">
	.nav-scroll {
		margin-top: 50rpx;
		padding-left: 30rpx;
		overflow-x: scroll;
	}
	.filter-box {
		padding: 20rpx 40rpx;
		border-bottom: 1rpx solid #E5E5E5;
	}
	.shop-list {
		margin-top: 10rpx;
		// padding: 0 10rpx;
	}
</style>
